<template>
  <div class="shift">
    <div class="shift-search">
      <el-input
        v-model="formInline.projectName"
        @blur="handlePageChange(1)"
        @change="handlePageChange(1)"
        style="width: 280px"
        placeholder="搜索项目名"
        class="shift-search-input"
      />
      <el-select
        v-model="formInline.projectType"
        clearable filterable
        placeholder="类型"
        style="width: 280px"
        class="shift-search-select"
        @change="handlePageChange(1)"
      >
        <el-option
          v-for="item in projectTypeList"
          :key="item.itemCode"
          :label="item.itemName"
          :value="item.itemCode"
        />
      </el-select>
      <el-select
        placeholder="科室"
        style="width: 280px"
        @change="handlePageChange(1)"
        clearable filterable
        v-model="formInline.deptId"
        class="shift-search-select"
      >
        <el-option
          v-for="item in deptList"
          :key="item.deptId"
          :label="item.deptName"
          :value="item.deptId"
        />
      </el-select>
      <!-- <el-button type="primary"  @click="handlePageChange(1)" class="shift-search-btn">查询</el-button> -->
      <el-button
        type="primary"
        class="shift-search-right"
        v-btnPermission="btnAddPermission"
        @click="add"
        ><el-icon style="margin-right: 5px"><Plus /></el-icon>新增</el-button
      >
    </div>
    <div class="shift-content">
      <Table v-if="tableColumns?.length"
        :columns="tableColumns"
        :loading="loading"
        :data-source="tableData"
      />
    </div>
    <div class="shift-page-pagination">
      <Pagination
        style="margin-left: auto"
        :key="formInline.pageSize + 'Pagination' + formInline.pageNo"
        :count="total"
        :page-size="formInline.pageSize"
        :pageNo="formInline.pageNo"
        @onPagechange="handlePageChange"
        @onSizechange="handleSizeChange"
      />
    </div>
    <updata
      ref="updataRef"
      :data-type="dataType"
      :projectCategory="projectCategory"
      @closeDrawer="getProjectFeeListApi"
    />
  </div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { deptGetSelectList } from '@/api/account';
import type { TableColumn } from '@/types/table';
import stores from '@/store';
import {
  getProjectFeeList,
  addProjectFee,
  updateProjectFee,
  deleteProjectFee,
  enableProjectFee,
  disableProjectFee,
} from '@/api/projectFee';
import type {
  ProjectFeeForm,
  ProjectFeeInfo,
  ProjectFeeTable,
} from '@/types/projectFee/index';
const props = defineProps({
  projectCategory: {
    type: String,
    default: '1',
  },
});
const deptList = ref<any>([]);
const getDeptGetSelectList = async () => {
  let res = await deptGetSelectList();
  deptList.value = res.data;
};
getDeptGetSelectList();

import updata from './commonss/updata.vue';
const updataRef = ref<InstanceType<typeof updata>>();

const projectTypeList = ref<any>([]);

const btnAddPermission = ref<any>('');
const btnEnablePermission = ref<any>('');
const btnEditPermission = ref<any>('');
const btnDisablePermission = ref<any>('');
const btnDelPermission = ref<any>('');
//项目类型;头部CT 如果projectCategory=1取字典中的EXAM_TYPE,projectCategory=2取LAB_TYPE，如果等于3取EXT_TYPE
if (props.projectCategory == '1') {
  projectTypeList.value = stores.useBaseDataStore().getDictsSelect('EXAM_TYPE');
  btnAddPermission.value = 'btn-project-jc-updata';
  btnEditPermission.value = 'btn-project-jc-edit';
  btnEnablePermission.value = 'btn-project-jc-enable';
  btnDisablePermission.value = 'btn-project-jc-disable';
  btnDelPermission.value = 'btn-project-jc-del';
}
if (props.projectCategory == '2') {
  projectTypeList.value = stores.useBaseDataStore().getDictsSelect('LAB_TYPE');
  btnAddPermission.value = 'btn-project-jy-updata';
  btnEditPermission.value = 'btn-project-jy-edit';
  btnEnablePermission.value = 'btn-project-jy-enable';
  btnDisablePermission.value = 'btn-project-jy-disable';
  btnDelPermission.value = 'btn-project-jy-del';
}
if (props.projectCategory == '3') {
  projectTypeList.value = stores.useBaseDataStore().getDictsSelect('EXT_TYPE');
  btnAddPermission.value = 'btn-project-wz-updata';
  btnEditPermission.value = 'btn-project-wz-edit';
  btnEnablePermission.value = 'btn-project-wz-enable';
  btnDisablePermission.value = 'btn-project-wz-disable';
  btnDelPermission.value = 'btn-project-wz-del';
}
const dataType = ref(1); // 数据类型
const loading = ref<boolean>(false);
const formInline = ref<ProjectFeeForm>({
  projectCategory: props.projectCategory,
  projectType: '',
  projectName: '',
  deptId: '',
  pageNo: 1,
  pageSize: 10,
});
import type { Action } from 'element-plus';
let unitList: any = [];
for (
  let index = 0;
  index < stores.useBaseDataStore().getDictsSelect('UNIT').length;
  index++
) {
  let item = stores.useBaseDataStore().getDictsSelect('UNIT')[index];
  if (item.unitType == '2') {
    unitList.push(item);
  }
}

const tableColumns = ref<TableColumn[]>();

let optionList = [];
if (props.projectCategory == '1') {
  optionList = stores.useBaseDataStore().getDictsSelect('EXAM_TYPE');
  tableColumns.value = [
    {
      prop: 'projectType',
      label: '检查类型',
      type: 'match',
      optionList: optionList,
      key: 'itemCode',
      keyName: 'itemName',
    },
    { prop: 'projectName', label: '项目名称' },
    { prop: 'deptName', label: '执行科室' },
    { prop: 'price', label: '销售价格', width: 200 },
    {
      prop: 'unit',
      label: '单位',
      type: 'match',
      optionList: unitList,
      key: 'unitCode',
      keyName: 'unitText',
    },
    { prop: 'sortNum', label: '排序' },
    { prop: 'isEnabled', label: '状态', type: 'tag' },
    { prop: 'updateBy', label: '最近修改人' },
    { prop: 'updateTime', label: '最近修改时间' },
    {
      prop: 'action',
      label: '操作',
      type: 'action',
      width: 170,
      componentProps: {
        fixed: 'right',
      },
      buttonGroup: [
        {
          label: '编辑',
          permissions: btnEditPermission.value,
          type: 'text',
          click: (row: any) => {
            //console.log('编辑', row);
            if (updataRef.value) {
              dataType.value = 1;
              updataRef.value.open1(row);
            }
          },
        },
        {
          label: '启用',
          permissions: btnEnablePermission.value,
          statusName: ['isEnabled'],
          status: '停用',
          type: 'text',
          click: (row: any) => {
            enableProjectFee(row.projectId).then((res) => {
              if (res.code == '200') {
                getProjectFeeListApi(); // 刷新列表

                ElMessage({
                  type: 'success',
                  message: '操作成功',
                });
              } else {
                
              }
            });
          },
        },
        {
          label: '停用',
          permissions: btnDisablePermission.value,
          statusName: ['isEnabled'],
          status: '启用',
          type: 'text',
          color: '#D90000',
          click: (row: any) => {
            disableProjectFee(row.projectId).then((res) => {
              if (res.code == '200') {
                getProjectFeeListApi(); // 刷新列表
                ElMessage({
                  type: 'success',
                  message: '操作成功',
                });
              } else {
                
              }
            });
          },
        },
        {
          label: '删除',
          permissions: btnDelPermission.value,
          type: 'text',
          color: '#D90000',
          click: (row: any) => {
            ElMessageBox.alert('确定要删除吗？', '删除班次', {
              confirmButtonText: '确定',
              callback: (action: Action) => {
                 if(action == 'cancel'){
                  return;
              }
                try {
                  deleteProjectFee(row.projectId).then((res) => {
                    if(res.code == '200'){
                      getProjectFeeListApi(); // 刷新列表
                      ElMessage({
                        type: 'success',
                        message: '操作成功',
                      });
                    }else{
                      //ElMessage.error(res.msg);
                    }
                    
                  });
                } catch (error: any) {
                  //console.log(error, '删除失败');
                }
              },
            });
          },
        },
      ],
    },
  ];
}
if (props.projectCategory == '2') {
  optionList = stores.useBaseDataStore().getDictsSelect('LAB_TYPE');
  tableColumns.value = [
    {
      prop: 'projectType',
      label: '检验类型',
      type: 'match',
      optionList: optionList,
      key: 'itemCode',
      keyName: 'itemName',
    },
    { prop: 'projectName', label: '项目名称' },
    { prop: 'sampleTypeText', label: '样本类型' },
    { prop: 'deptName', label: '执行科室' },
    { prop: 'price', label: '销售价格', width: 200 },
    {
      prop: 'unit',
      label: '单位',
      type: 'match',
      optionList: unitList,
      key: 'unitCode',
      keyName: 'unitText',
    },
    { prop: 'sortNum', label: '排序' },
    { prop: 'isEnabled', label: '状态', type: 'tag' },
    { prop: 'updateBy', label: '最近修改人' },
    { prop: 'updateTime', label: '最近修改时间' },
    {
      prop: 'action',
      label: '操作',
      type: 'action',
      width: 170,
      componentProps: {
        fixed: 'right',
      },
      buttonGroup: [
        {
          label: '编辑',
          permissions: btnEditPermission.value,
          type: 'text',
          click: (row: any) => {
            //console.log('编辑', row);
            if (updataRef.value) {
              dataType.value = 1;
              updataRef.value.open1(row);
            }
          },
        },
        {
          label: '启用',
          permissions: btnEnablePermission.value,
          statusName: ['isEnabled'],
          status: '停用',
          type: 'text',
          click: (row: any) => {
            enableProjectFee(row.projectId).then((res) => {
              if (res.code == '200') {
                getProjectFeeListApi(); // 刷新列表

                ElMessage({
                  type: 'success',
                  message: '操作成功',
                });
              } else {
                
              }
            });
          },
        },
        {
          label: '停用',
          permissions: btnDisablePermission.value,
          statusName: ['isEnabled'],
          status: '启用',
          type: 'text',
          color: '#D90000',
          click: (row: any) => {
            disableProjectFee(row.projectId).then((res) => {
              if (res.code == '200') {
                getProjectFeeListApi(); // 刷新列表
                ElMessage({
                  type: 'success',
                  message: '操作成功',
                });
              } else {
               
              }
            });
          },
        },
        {
          label: '删除',
          permissions: btnDelPermission.value,
          type: 'text',
          color: '#D90000',
          click: (row: any) => {
            ElMessageBox.alert('确定要删除吗？', '删除班次', {
              confirmButtonText: '确定',
              callback: (action: Action) => {
                 if(action == 'cancel'){
                  return;
              }
                try {
                  deleteProjectFee(row.projectId).then((res) => {
                    if(res.code == '200'){
                      getProjectFeeListApi(); // 刷新列表
                      ElMessage({
                        type: 'success',
                        message: '操作成功',
                      });
                    }else{
                      //ElMessage.error(res.msg);
                    }
                  });
                } catch (error: any) {
                  //console.log(error, '删除失败');
                }
              },
            });
          },
        },
      ],
    },
  ];
}
if (props.projectCategory == '3') {
  optionList = stores.useBaseDataStore().getDictsSelect('EXT_TYPE');
  tableColumns.value = [
    {
      prop: 'projectType',
      label: '外治类型',
      type: 'match',
      optionList: optionList,
      key: 'itemCode',
      keyName: 'itemName',
    },
    { prop: 'projectName', label: '项目名称' },
    { prop: 'deptName', label: '执行科室' },
    { prop: 'chargeTypeText', label: '收费类型' },
    { prop: 'price', label: '销售价格', width: 200 },
    { prop: 'sortNum', label: '排序' },
    { prop: 'isEnabled', label: '状态', type: 'tag' },
    { prop: 'updateBy', label: '最近修改人' },
    { prop: 'updateTime', label: '最近修改时间' },
    {
      prop: 'action',
      label: '操作',
      type: 'action',
      width: 170,
      componentProps: {
        fixed: 'right',
      },
      buttonGroup: [
        {
          label: '编辑',
          permissions: btnEditPermission.value,
          type: 'text',
          click: (row: any) => {
            //console.log('编辑', row);
            if (updataRef.value) {
              dataType.value = 1;
              updataRef.value.open1(row);
            }
          },
        },
        {
          label: '启用',
          permissions: btnEnablePermission.value,
          statusName: ['isEnabled'],
          status: '停用',
          type: 'text',
          click: (row: any) => {
            enableProjectFee(row.projectId).then((res) => {
              if (res.code == '200') {
                getProjectFeeListApi(); // 刷新列表

                ElMessage({
                  type: 'success',
                  message: '操作成功',
                });
              } else {
               
              }
            });
          },
        },
        {
          label: '停用',
          permissions: btnDisablePermission.value,
          statusName: ['isEnabled'],
          status: '启用',
          type: 'text',
          color: '#D90000',
          click: (row: any) => {
            disableProjectFee(row.projectId).then((res) => {
              if (res.code == '200') {
                getProjectFeeListApi(); // 刷新列表
                ElMessage({
                  type: 'success',
                  message: '操作成功',
                });
              } else {
               
              }
            });
          },
        },
        {
          label: '删除',
          permissions: btnDelPermission.value,
          type: 'text',
          color: '#D90000',
          click: (row: any) => {
            ElMessageBox.alert('确定要删除吗？', '删除班次', {
              confirmButtonText: '确定',
              callback: (action: Action) => {
                 if(action == 'cancel'){
                  return;
              }
                try {
                  deleteProjectFee(row.projectId).then((res) => {
                    if(res.code != '200'){
                      //ElMessage.error(res.msg);
                      return
                    }
                    getProjectFeeListApi(); // 刷新列表
                    ElMessage({
                      type: 'success',
                      message: '操作成功',
                    });
                  });
                } catch (error: any) {
                  //console.log(error, '删除失败');
                }
              },
            });
          },
        },
      ],
    },
  ];
}

//新增
const add = () => {
  if (updataRef.value) {
    dataType.value = 0;
    updataRef.value.open();
  }
};

const total = ref<number>(0);

const handlePageChange = (page: number) => {
  formInline.value.pageNo = page;
  getProjectFeeListApi();
};
const handleSizeChange = (size: number) => {
  formInline.value.pageSize = size;
  formInline.value.pageNo = 1;
  getProjectFeeListApi();
};

const tableData = ref<ProjectFeeInfo[]>([]);

const labSampleTypeEnum = stores.useBaseDataStore().getEnumSelect('labSampleTypeEnum');
const projectChargeTypeEnum = stores.useBaseDataStore().getEnumSelect('projectChargeTypeEnum');
const getProjectFeeListApi = async () => {
  loading.value = true;
  const res = await getProjectFeeList(formInline.value);
  if(res.code != '200'){
    //ElMessage.error(res.msg);
    loading.value = false;
    return
  }
  // //console.log(res);
  res.data.list.forEach((item: any) => {
    item.isEnabled = item.isEnabled === '1' ? '启用' : '停用';
    item.price = (item.price / 100).toFixed(2);
    if(props.projectCategory == '3'){
      projectChargeTypeEnum.forEach((chargeItem: any) => {
        if(item.chargeType == chargeItem.value){
          item.chargeTypeText = chargeItem.text;
        }
      });
    }
    if(props.projectCategory == '2'){
      labSampleTypeEnum.forEach((labItem: any) => {
        if(item.sampleType == labItem.value){
          item.sampleTypeText = labItem.text;
        }
      });
    }
  });
  tableData.value = res.data.list;
  total.value = res.data.totalCount;
  loading.value = false;
};
getProjectFeeListApi();
</script>
<style>
.el-table th.el-table__cell {
  background-color: #f8f9fa !important;
}
</style>
<style lang="scss">
.shift {
  padding: 5px 24px;
  .table-cell-content {
    width: 100%;
    height: 100px;
    background: #ecf8f8;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0px 0px 0px 0px;
    padding: 10px;

    div {
      margin-bottom: 5px;
    }
  }

  .table-cell-content-null {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
  }

  .table-cell-content:hover .table-cell-content-xf {
    display: flex;
  }

  .table-cell-content-xf {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .shift-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    padding: 12px 0;
  }

  .shift-search {
    display: flex;
    display: flex;
    align-items: center;

    .shift-search-input {
      margin-right: 12px;
      width: 250px;
    }

    .shift-search-select {
      margin-right: 12px;
      width: 280px;
    }

    .shift-search-right {
      margin-left: auto;
    }
  }

  .shift-page-pagination {
    display: flex;
    align-items: center;
    padding: 20px 24px;

    .drugStorage-page-pagination-total {
      margin-right: 20px;
    }
  }

  .shift-content {
    .table-components {
      width: 100%;
    }
  }
}
</style>
